<template>
	<view>
		<view>
			<!-- 今明后 -->
			<view class="z-margin-t-48 z-padding-lr-32 z-flex-c-s-b">
				<view :class="day == index ? 'cur' : 'setTime'" v-for="(item,index) in dayTime" @tap="setDay(index)">
					<view :class="day == index ? 'cur-time-sky z-padding-t-16 z-text-c' : 'time-sky z-padding-t-16 z-text-c'">{{ item.day }}</view>
					<view :class="day == index ? 'cur-time-hour z-text-c' : 'z-text-c time-hour'">{{ item.time }}</view>
				</view>
			</view>

			<view class="z-margin-t-32 z-text-c z-font-30 title-head" @tap="allSet">全部{{ busy === 1 ? '忙' : '闲' }}</view>

			<!-- 选择预约时间 -->
			<view class="set-time-box z-flex-c z-padding-lr-32">
				<view class="setTime z-margin-t-24" :class="'state'+item.state" v-for="(item,index) in list" v-if="item.starttime*1000 > now" @tap="timeTap(item)">
					<view class="z-padding-t-16 z-text-c time-sky" v-if="item.state == 2">不可预约</view>
					<view class="z-padding-t-16 z-text-c time-sky" v-else-if="item.state == 1">已预约</view>
					<view class="z-padding-t-16 z-text-c time-sky" v-else>可预约</view>
					<view class="z-text-c time-hour">{{ item.starttime | date('hh:MM') }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			day: 0,
			dayTime: [],
			list: [],
			now: new Date().getTime(),
			busy: 1
		};
	},
	onLoad(options) {
		this.getInfo();
		this.dayTime = [
				{ day: '今天', time: this.util.formatTime(this.now, 'mm-dd') },
				{ day: '明天', time: this.util.formatTime(this.now + 86400000, 'mm-dd') },
				{ day: '后天', time: this.util.formatTime(this.now + 172800000, 'mm-dd') }
			]
	},
	methods: {
		allSet() {
			let arr = this.list.map((value) => {
				if (this.busy === 1) {
					if (value.state === 0) {
						return value.id;
					}
				} else {
					if (value.state === 2) {
						return value.id;
					}
				}
			});
			this.setTime(arr.join(','), this.busy === 1 ? 'busy' : 'recover', 'all');
		},
		setDay(e) {
			this.day = e
			this.getInfo();
		},
		timeTap(e) {
			let info = e;
			if (info.state === 0) {
				this.setTime(info.id, 'busy');
			} else if (info.state === 2) {
				this.setTime(info.id, 'recover');
			}
		},
		setTime(ids, type, types) {
			this.http.get('skill/skilltime', {
				type,
				ids
			}).then((res) => {
				this.getInfo();
				if (types === 'all') {
					this.busy = this.busy === 1 ? 0 : 1
				}
			});
		},
		getInfo() {
			this.http.get('skill/skilltime', {
				timetype: this.day
			}).then((res) => {
				this.list = res.data
			});
		}
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}
.setTime {
	width: 212rpx;
	height: 117rpx;
	background: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	margin-right: 25rpx;
}
.setTime:nth-of-type(3n) {
	margin-right: 0;
}
.time-sky {
	font-size: 24rpx;
	font-weight: 500;
	color: #6b738b;
}
.time-hour {
	font-size: 32rpx;
	font-weight: bold;
	color: #1c274c;
	margin: 12rpx;
}
.title-head {
	width: 686rpx;
	height: 98rpx;
	background: #1677ff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	margin: auto;
	line-height: 98rpx;
	color: #fff;
}
.set-time-box {
	flex-wrap: wrap;
}
/* 动态 */
.cur {
	width: 213rpx;
	height: 117rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	background-color: #e8f2ff;
	border: 1rpx solid #1677ff;
}
.cur-time-sky {
	font-size: 24rpx;
	font-weight: 500;
	color: #1677ff;
}
.cur-time-hour {
	font-size: 32rpx;
	font-weight: bold;
	color: #1677ff;
	margin: 12rpx;
}

.state1 {
	background-color: #feebeb;
}
.state1 .state1 {
	color: #f22e2e;
}
.state1 .time-hour {
	color: #f22e2e;
}

.state2 {
	background-color: #f5f7f9;
}
.state2 .state1 {
	color: #a4a9b7;
}
.state2 .time-hour {
	color: #a4a9b7;
}
</style>
